.gallery {
    position: relative;
    width: 100%;
    max-width: 600px; /* 或任何适合的宽度 */
    margin: auto;
}
nav li{
	display: inline-block;
	position: relative;
	transition: 0.5s;
	float: left;
}
nav li:hover{
	transform: translate(0,-10px);
}
nav li::after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -99;
	background-image: linear-gradient(90deg,red 50%,#ff9238 100%);/*线性渐变*/
	width: 200px;
	height: 50px;
	border-radius: 8px;
	transform: skew(-30deg);
	transition: 0.5s;
	box-shadow: 5px 5px 5px 3px #ffaa7f;
}
nav li a{
	display: block;
	width: 100px;
	height: 50px;
	margin-right: 150px;
	line-height: 50px;
	text-align: center;
}
nav a{
	display: block;
	color: #fff;
}

.image-container {
    position: relative;
    width: 100%;
}

.gallery-img {
    width: 100%;
    height: auto;
    display: block; /* 使图片宽度适应容器 */
    transition: transform 0.5s ease; /* 平滑过渡效果 */
}

.caption {
    text-align: center;
    background: #333;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-container:hover .gallery-img {
    transform: translateY(-20px); /* 鼠标悬停时图片上浮 */
}

.image-container:hover .caption {
    opacity: 1; /* 鼠标悬停时文字显示 */
}
body{
	background-image: linear-gradient(125deg,#00ffff,#ffaaff,#1d7cba,#5555ff,#55ff7f);
	background-size: 400%;
	animation: bgmove 60s infinite;
}
@keyframes bgmove{
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0% 50%;
	}
}